<template>
  <div class="height-100">
    <div class="problem xy-card margin-small">
      <div class="problemContent"></div>
    </div>
    <div class="answer xy-card margin-small">
      <div>答：</div>
      <div class="answerContent"></div>
      <el-input :value="answer" @input="updateAnswer"></el-input>
    </div>
    <div class="hidden">{{localQuestion}}</div>
  </div>
</template>

<script type="text/babel">

  export default {
    props: ['question', 'answer'],
    data() {
      return {}
    },
    computed: {
      /**
       * 单纯为了更新题目内容
       */
      localQuestion() {
        this.renderProblem();
        return this.question;
      }
    },
    methods: {
      updateAnswer(value) {
        this.$emit('update:answer', value);
      },
      renderProblem() {
        let elem = this.$func.renderLatexFromString(this.question.content);
        let parent = document.getElementsByClassName('problemContent')[0];
        if(parent) {
          parent.innerHTML = '';
          parent.appendChild(elem);
        }
      },
      check() {
        let result = this.$float.isEqual(this.question.answer, parseFloat(this.answer));
        this.$emit('check', result);
      }
    },
    mounted() {
      this.renderProblem();
    }
  };
</script>
